<template>
    <section class="HelpMeFindHouse-box">
        <app-header></app-header>

        <!--背景图-->
        <article class="bg-box">
            <div class="inside">
                <div class="container">
                    <h3>Help me to find house</h3>
                    <h4>
                        <p class="clearfix">
                            <i class="iconfont icon-chakan"></i> 帮我找房
                        </p>
                        <span><i class="iconfont icon-xiugai"></i> 请您认真填写购房偏好，我们会在您方便的时候与您取得联系并为您提供专业的购房策略！</span>
                    </h4>
                </div>
            </div>
        </article>

        <!--中间内容-->
        <div class="content">
            <div class="container">
                <a-form layout="horizontal" :form="form" @submit="handleSubmit" class="form-box">
                    <div class="list">
                        <div class="title">1、意向城市</div>
                        <aside>
                            <a-form-item :labelCol="{ span: 24 }" hasFeedback>
                                <a-checkbox-group v-decorator="['tendencySite', {rules: [
                                                        { type: 'array', required: true, message: '请选择意向城市', trigger: 'change' }
                                                  ]}]">
                                    <a-row>
                                        <a-col :span="6" v-for="(item, index) in checkBoxCityItem" :key="index">
                                            <a-checkbox :value="item.chineseName">{{item.chineseName}}</a-checkbox>
                                        </a-col>
                                    </a-row>
                                </a-checkbox-group>
                            </a-form-item>
                        </aside>
                    </div>
                    <div class="list">
                        <div class="title">2、房屋类型</div>
                        <aside>
                            <a-form-item :labelCol="{ span: 24 }" hasFeedback>
                                <a-checkbox-group v-decorator="['tendencyRoom', {rules: [
                                                        { type: 'array', required: true, message: '请选择房屋类型', trigger: 'change' }
                                                  ]}]">
                                    <a-row>
                                        <a-col :span="6" v-for="(item, index) in checkBoxHouseTypeItem" :key="index">
                                            <a-checkbox :value="item.title">{{item.title}}</a-checkbox>
                                        </a-col>
                                    </a-row>
                                </a-checkbox-group>
                            </a-form-item>
                        </aside>
                    </div>
                    <div class="list">
                        <div class="title">3、投资类型</div>
                        <aside>
                            <a-form-item :labelCol="{ span: 24 }" hasFeedback>
                                <a-checkbox-group v-decorator="['investmentObjective', {rules: [
                                                        { type: 'array', required: true, message: '请选择投资类型', trigger: 'change' }
                                                  ]}]">
                                    <a-row>
                                        <a-col :span="6" v-for="(item, index) in checkBoxInvestmentPreferenceItem"
                                               :key="index">
                                            <a-checkbox :value="item.title">{{item.title}}</a-checkbox>
                                        </a-col>
                                    </a-row>
                                </a-checkbox-group>
                            </a-form-item>
                        </aside>
                    </div>
                    <div class="list">
                        <div class="title">4、您的资金来源</div>
                        <aside>
                            <a-form-item :labelCol="{ span: 24 }" hasFeedback>
                                <a-radio-group style="padding: 0 30px 0 0;"
                                               v-decorator="['capitalSource', {rules: [
                                                    { type: 'string', required: true, message: '请选择资金来源', trigger: 'change' }
                                               ]}]">
                                    <a-radio value="国内资金">国内资金</a-radio>
                                    <a-radio value="海外资金">海外资金</a-radio>
                                </a-radio-group>
                            </a-form-item>
                        </aside>
                    </div>
                    <div class="list">
                        <div class="title">5、购房预算<span>（币种：人民币）</span></div>
                        <aside>
                            <a-form-item :labelCol="{ span: 24 }" hasFeedback>
                                <a-checkbox-group v-decorator="['tendencyPrice', {rules: [
                                                        { type: 'array', required: true, message: '请选择购房预算', trigger: 'change' }
                                                  ]}]">
                                    <a-row>
                                        <a-col :span="6" v-for="(item, index) in checkBoxBuyHouseBudgetItem" :key="index">
                                            <a-checkbox :value="item.title">{{item.title}}</a-checkbox>
                                        </a-col>
                                    </a-row>
                                </a-checkbox-group>
                            </a-form-item>
                        </aside>
                    </div>
                    <div class="list">
                        <div class="title">6、面积倾向</div>
                        <aside>
                            <a-form-item :labelCol="{ span: 24 }" hasFeedback>
                                <a-checkbox-group v-decorator="['tendencySize', {rules: [
                                         { type: 'array', required: true, message: '请选择面积倾向', trigger: 'change' }
                                     ]}]">
                                    <a-row>
                                        <a-col :span="6" v-for="(item, index) in checkBoxArea" :key="index">
                                            <a-checkbox :value="item.value">{{item.label}}</a-checkbox>
                                        </a-col>
                                    </a-row>
                                </a-checkbox-group>
                            </a-form-item>
                        </aside>
                    </div>
                    <div class="list">
                        <div class="title">7、学区评分倾向</div>
                        <aside>
                            <a-form-item :labelCol="{ span: 24 }" hasFeedback>
                                <a-checkbox-group class="clearfix checkBox-greatSchool" style="padding: 0 30px 0 0;"
                                                  v-decorator="['tendencySchool', {rules: [
                                            { type: 'array', required: true, message: '请选择学区评分倾向', trigger: 'change' }
                                      ]}]">
                                    <a-checkbox value="1~5">
                                        不理想&nbsp;&nbsp;&nbsp;&nbsp;<span class="Not-ideal"><i>1</i> ~ <i>5</i></span>
                                    </a-checkbox>
                                    <a-checkbox value="6~7">
                                        合格&nbsp;&nbsp;&nbsp;&nbsp;<span class="qualified"><i>6</i> ~ <i>7</i></span>
                                    </a-checkbox>
                                    <a-checkbox value="8~10">
                                        优秀&nbsp;&nbsp;&nbsp;&nbsp;<span class="excellent"><i>8</i> ~ <i>10</i></span>
                                    </a-checkbox>
                                </a-checkbox-group>
                            </a-form-item>
                        </aside>
                    </div>
                    <div class="list">
                        <div class="title">8、留言备注</div>
                        <aside>
                            <a-form-item :wrapperCol="{ span: 24 }" hasFeedback>
                                <a-textarea placeholder="您的留言（限制100位字符）" :autosize="{ maxRows: 3 }" v-decorator="['message', {rules: [
                                     { message: '请输入您的留言', trigger: 'blur' }
                                 ]}]"/>
                            </a-form-item>
                        </aside>
                    </div>
                    <div class="list">
                        <div class="title">9、您的联系信息</div>
                        <aside>
                            <a-row :gutter="16">
                                <a-col :span="6">
                                    <a-form-item :wrapperCol="{ span: 24 }" hasFeedback>
                                        <a-input type="text" placeholder="请输入姓名" size="large"
                                                 v-decorator="['name', {rules: [
                                                     { required: true, message: '请正确输入您的姓名', trigger: 'blur' }
                                                 ]}]">
                                            <i slot="prefix" class="iconfont icon-gerenjibenxinxi"></i>
                                        </a-input>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="6">
                                    <a-form-item :wrapperCol="{ span: 24 }" hasFeedback>
                                        <a-input type="number" placeholder="请输入手机号码" maxLength='11' size="large"
                                                 v-decorator="['phone', {rules: [
                                                    {required: true, validator: this.phone_validation, trigger: 'blur' },
                                                ]}]">
                                            <i slot="prefix" class="iconfont icon-dianhua"></i>
                                        </a-input>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="6">
                                    <a-form-item :wrapperCol="{ span: 24 }" hasFeedback>
                                        <a-input type="email" placeholder="请输入邮箱" size="large"
                                                 v-decorator="['email', {rules: [
                                                    {required: true, validator: this.email_validation, trigger: 'blur' },
                                                ]}]">
                                            <i slot="prefix" class="iconfont icon-dkw_youxiang"></i>
                                        </a-input>
                                    </a-form-item>
                                </a-col>

                                <a-col :span="6">
                                    <a-form-item :wrapperCol="{ span: 24}" hasFeedback>
                                        <a-input-search type="number" placeholder="验证码" @search="sendCode" size="large"
                                                        v-decorator="['code', {rules: [
                                                            { required: true, validator: this.code_validation, trigger: 'blur' },
                                                        ]}]">
                                            <i slot="prefix" class="iconfont icon-icon_sms"></i>
                                            <a-button type="primary" slot="enterButton" :disabled="codeDisabled">{{ codeText }}</a-button>
                                        </a-input-search>
                                    </a-form-item>
                                </a-col>

                                <a-col :span="24">
                                    <a-form-item style="text-align: center; margin: 50px 0 0 0;">
                                        <a-button htmlType="submit" type="primary" size="large">
                                            <i class="iconfont icon-dianhua"></i> 有合适的房源通知我
                                        </a-button>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </aside>
                    </div>
                </a-form>
            </div>
        </div>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../components/header.vue';//公共组件——头部
    import BackTop from '../components/BackTop.vue';//公共组件——返回顶部
    let phoneReg = /^(1)[3|4|5|6|7|8|9](\d){9}$/;

    export default {
        data() {
            return {
                checkBoxCityItem: [], // 获取意向城市数据
                checkBoxHouseTypeItem: [], // 获取房屋类型数据
                checkBoxInvestmentPreferenceItem: [], // 获取投资类型数据
                checkBoxBuyHouseBudgetItem: [], // 获取房屋总价/购房预算数据
                //面积倾向数据
                checkBoxArea: [
                    {
                        label: '100平米以内',
                        value: '100平米以内'
                    },
                    {
                        label: '150平米以内',
                        value: '150平米以内'
                    },
                    {
                        label: '200平米以内',
                        value: '200平米以内'
                    },
                    {
                        label: '240平米以内',
                        value: '240平米以内'
                    },
                    {
                        label: '300平米以内',
                        value: '300平米以内'
                    },
                    {
                        label: '400平米以内',
                        value: '400平米以内'
                    },
                    {
                        label: '500平米以内',
                        value: '500平米以内'
                    },
                    {
                        label: '500平米以上',
                        value: '500平米以上'
                    }
                ],
                form: this.$form.createForm(this),
                verificationCode: '', //验证码的验证串
                codeTime: 0, //获取验证码倒计时
                codeText: '获取验证码', //获取验证码按钮的提示文本
                codeDisabled: false //获取验证码按钮的状态

            }
        },
        metaInfo () {
            return {
                title: '帮我找房_华美优胜美国房地产投资公司',
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: '帮我找房_华美优胜美国房地产投资公司' },
                    { vmid: 'description', name: 'description', content: '帮我找房_华美优胜美国房地产投资公司' },

                ],
            }
        },
        computed: {},
        created() {
        },
        mounted() {
            this.getCityData(); // 获取意向城市数据列表
            this.getHouseTypeData(); // 获取房屋类型数据列表
            this.getInvestmentPreferenceTypeData(); //获取投资类型列表
            this.getBuyHouseBudgetData(); // 获取房屋总价/购房预算列表

            this.isCodeTime(); // 防刷新：检测是否存在倒计时计算localStorage.codeTime

        },
        methods: {
            // 获取意向城市数据
            getCityData() {
                this.$get('/city/list/1/20').then(res => {
                    if (res.status === 0) {
                        this.checkBoxCityItem = res.list
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            //获取房屋类型数据
            getHouseTypeData() {
                this.$get('/house/project/type').then(res => {
                    if (res.status === 0) {
                        this.checkBoxHouseTypeItem = res.data
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            // 获取投资类型列表
            getInvestmentPreferenceTypeData() {
                this.$get('/house/investment/type').then(res => {
                    if (res.status === 0) {
                        this.checkBoxInvestmentPreferenceItem = res.data
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            // 获取房屋总价/购房预算列表
            getBuyHouseBudgetData() {
                this.$get('/house/price/section').then(res => {
                    if (res.status === 0) {
                        this.checkBoxBuyHouseBudgetItem = res.data
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            // 防刷新：检测是否存在倒计时计算localStorage.codeTime
            isCodeTime() {
                if (localStorage.codeTime) {
                    this.codeTime = parseInt(localStorage.codeTime);
                    this.codeText = this.codeTime + 's后重新获取';
                    this.codeDisabled = true;
                    let resend = setInterval(function () {
                        this.codeTime--;
                        if (this.codeTime > 0) {
                            this.codeText = this.codeTime + 's后重新获取';
                            localStorage.codeTime = this.codeTime;
                        } else {
                            localStorage.removeItem('codeTime');
                            clearInterval(resend);
                            this.codeText = '获取验证码';
                            this.codeDisabled = false;
                        }
                    }, 1000)
                }else{
                    this.codeText = '获取验证码';
                    this.codeDisabled = false;
                }
            },
            //验证码倒计时计算
            codeCountdown() {
                if (this.codeTime > 0) {
                    this.codeTime--;
                    this.codeText = this.codeTime + 's后重新获取';
                    setTimeout(this.codeCountdown, 1000);
                    localStorage.codeTime = this.codeTime;
                } else {
                    this.codeTime = 0;
                    this.codeText = '获取验证码';
                    this.codeDisabled = false;
                    localStorage.removeItem('codeTime')
                }
            },
            // 发送验证码
            sendCode() {
                let phone = this.form.getFieldValue('phone');
                // 手机号正则验证
                if (phoneReg.test(phone)) {
                    // 手机号符合验证
                    this.$get('/sms/find/' + phone).then(res => {
                        if (res.status == 0) {
                            this.codeTime = 60;
                            this.codeDisabled = true;
                            this.codeCountdown();
                            this.$message.success('发送成功，请您耐心等待短信通知。');
                            this.verificationCode = res.data;
                        } else {
                            this.$message.warning(res.msg);
                        }
                    })
                } else {
                    this.$message.error('手机号格式错误。')
                }
            },
            // 有合适的房源通知我
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.$post('/help/find/house/save', {
                            name: values.name, //客户姓名
                            phone: values.phone, //客户电话
                            email: values.email, //客户邮箱
                            msg: values.code, //验证码
                            msgId: this.verificationCode,
                            tendencySite: values.tendencySite.join(), //选取的意向城市
                            tendencyRoom: values.tendencyRoom.join(), //选取的房源类型
                            investmentObjective: values.investmentObjective.join(), //选取的投资偏好
                            capitalSource: values.capitalSource, //选取的资金来源
                            tendencyPrice: values.tendencyPrice.join(), //选取的购房预算
                            tendencySize: values.tendencySize.join(), //选取的面积倾向
                            tendencySchool: values.tendencySchool.join(), //选取的学区评分
                            message: values.message, //留言
                        }).then(res => {
                            if (res.status == 0) {
                                this.$notification.success({
                                    message: '您的购房需求提交成功！',
                                    description: '华美优胜顾问团队将及时与您取得联系并提供专业的购房服务。',
                                });
                            } else {
                                this.$message.warning(res.msg);
                            }
                        })
                    } else {
                        this.$message.error('表单项选择有误，请检查并确定选择！');
                    }
                });
            },

        },
        components: {
            'app-header': Header,
            BackTop,
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        background: #ffffff;
        .HelpMeFindHouse-box {
            //背景图
            .bg-box {
                background: url(/static/img/ConsultantTeam1.jpg) no-repeat center center;
                background-size: 100%;
                padding: 0 !important;
                > .inside {
                    background: rgba(15, 40, 54, 0.6);
                    > .container {
                        padding: 150px 0;
                        text-align: center;
                        > h3 {
                            font-size: 35px;
                            font-family: 'HelveticaNeue-UltraLight', "PingFang SC", 'Microsoft Yahei', Arial, Verdana, sans-serif;
                            font-weight: 100;
                            color: #fff;
                        }
                        > h4 {
                            line-height: 35px;
                            font-size: 30px;
                            padding: 20px 0 30px 0;
                            color: #fff;
                            > p {
                                display: inline-block;
                                > i {
                                    font-size: 35px;
                                    color: #3cd0c5;
                                    float: left;
                                    margin: 0 10px 0 0;
                                }
                            }
                            > span {
                                display: block;
                                font-size: 15px;
                                margin: 15px 0;
                            }
                        }
                    }
                }
            }
            .content {
                background: #fff;
                > .container {
                    text-align: center;
                    padding: 50px 0;
                    > .form-box {
                        > .list {
                            margin: 30px 0;
                            text-align: left;
                            > .title {
                                padding: 0 0 0 10px;
                                border-left: 4px solid #00A4A0;
                                margin-bottom: 20px;
                                font-size: 16px;
                                font-weight: bold;
                                > span {
                                    font-size: 14px;
                                }
                            }
                            > aside {
                                padding: 30px 0;
                                border-top: 1px solid #E5E5E5;
                                width: 100%;
                                .ant-checkbox-group,
                                .ant-radio-group{
                                    width: 100%;
                                    > .ant-row {
                                        > div {
                                            margin: 10px 0;
                                        }
                                    }
                                }
                                /*学区评分*/
                                .checkBox-greatSchool{
                                    span.Not-ideal i,
                                    span.qualified i,
                                    span.excellent i {
                                        display: inline-block;
                                        width: 22px;
                                        height: 22px;
                                        line-height: 22px;
                                        text-align: center;
                                        font-size: 12px;
                                        color: #fff;
                                        border-radius: 50%;
                                    }
                                    span.Not-ideal i {
                                        background: #f75355;
                                    }
                                    span.qualified i {
                                        background: #fbaa60;
                                    }
                                    span.excellent i {
                                        background: #83bb71;
                                    }
                                }
                            }
                        }
                    }
                }
            }

        }
    }
</style>
